import './index.scss'
import { Button, Checkbox, Form, type FormProps, Input } from 'antd'
type FieldType = {
  username?: string
  password?: string
}
const onFinish: FormProps<FieldType>['onFinish'] = values => {
  console.log('Success:', values)
}

const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = errorInfo => {
  console.log('Failed:', errorInfo)
}
export default () => {
  const [loading, setLoading] = useState(false)
  return (
    <div className="login-container flex justify-center align-center">
      <Form
        className="login-form"
        name="basic"
        style={{ maxWidth: 600 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <h3 className="title">集 群 管 理 中 心</h3>

        <Form.Item<FieldType> name="username" rules={[{ required: true, message: '请输入账号' }]}>
          <Input placeholder="账号" />
        </Form.Item>

        <Form.Item<FieldType> name="password" rules={[{ required: true, message: '请输入您的密码' }]}>
          <Input.Password placeholder="密码" />
        </Form.Item>
        <Form.Item style={{ width: '100%' }}>
          <Button type="primary" htmlType="submit" style={{ width: '100%' }}>
            <LoginLoad loading={loading} />
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}
const LoginLoad = ({ loading }: { loading: boolean }) => {
  if (loading) {
    return <span>登录中...</span>
  } else {
    return <span>登录</span>
  }
}
